<template>
  <div class="white-module module">
    <div class="title-h"><span></span>账号信息</div>
    <div class="account-module">
      <div class="register">
        <div class="c">
          <el-form
              ref="ruleFormRef"
              :model="ruleForm"
              :rules="rules"
              label-width="140px"
              class="term-ruleForm"
              :size="formSize"
              status-icon
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="用户类型：" >
                  {{baseService.userType(ruleForm.roleId)}}
                </el-form-item>
                <el-form-item label="姓名：" >
                  {{ruleForm.realName}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="当前代表队："  v-if="!(ruleForm.roleId && ruleForm.roleId.includes('2')) && teamForm.account">
                  {{teamForm.teamName}}
                  <el-button
                      v-if="!unbindStatus && ruleForm.roleId.includes('3')"
                      type="text"
                      style="margin-left: 10px;"
                      @click="applyUnbind">申请解绑</el-button>
                  <span v-if="unbindStatus && ruleForm.roleId.includes('3')" style="margin-left: 10px;color: #999;">
                    申请解绑中，{{unbindDays}}天后将自动解绑
                  </span>
                </el-form-item>
                <el-form-item label="当前领队：" v-if="!(ruleForm.roleId && ruleForm.roleId.includes('2'))  && teamForm.realName">
                  {{teamForm.realName}}
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="性别：" >
                  {{ruleForm.sex?(ruleForm.sex==='1'?'男':'女'):''}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系方式：" v-if="!(ruleForm.roleId && ruleForm.roleId.includes('2'))  && teamForm.phone">
                  {{teamForm.phone}}
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="证件类型：">
                  <!-- 5 其他 -->
                  {{ruleForm.idType === '1' ? '居民身份证' : ruleForm.idType === '2' ? '临时身份证' : ruleForm.idType === '3' ? '港澳居民来往内地通行证' : ruleForm.idType === '4' ? '台湾居民来往大陆通行证' : ruleForm.idType === '5' ? '护照/其他' : ''}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="证件号码：">
                  {{baseService.hideIdCard(ruleForm.idCard)}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="参赛单位：" >
                  {{ruleForm.company}}<el-button type="text" @click="checkCompany(ruleForm.company)">验证单位</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="12">
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="单位地址：" >
                  {{ruleForm.address}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="联系方式(手机)：" >
                  {{ruleForm.phone}}
                </el-form-item>
              </el-col>
              <el-col :span="12">
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="电子邮箱：" >
                  {{ruleForm.email}}
                </el-form-item>
              </el-col>
              <el-col :span="12">

              </el-col>
            </el-row>


            <el-row>
              <el-col :span="12">
                <el-form-item label="一寸证件照：">
                  <el-upload disabled
                             class="avatar-uploader"
                             :action="baseUrl+'/front/upload'"
                             :show-file-list="false"
                             :on-success="handleAvatarSuccess"
                             :before-upload="beforeAvatarUpload"
                  >
                    <div class="image" style="width: 100px; height: 140px;">
                      <img v-if="ruleForm.header" :src="ruleForm.header" class="img" />
                      <div v-else class="upload">
                        <img src="@/assets/common/upload.png">
                        <div class="text">上传一寸照片</div>
                      </div>

                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="12">

              </el-col>
            </el-row>







          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import app from "@/constants/app";
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import type { UploadProps } from 'element-plus'
import baseService from "@/service/baseService";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRoute, useRouter} from "vue-router";
import {getCache, setCache} from "@/utils/cache";

const imageUrl = ref('')
const imageUrl2 = ref('')
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const route = useRoute();
const baseUrl = app.api;
let router = useRouter();
const ruleForm = reactive({
  id: null,
  email: "",
  company: "",
  realName: '',
  sex: "",
  idType: "",
  idCard: "",
  phone: "",
  code: "",
  header: "",
  roleId: "",
  address: "",
});

const teamForm = reactive({
  teamId: null,
  teamName: null,
  account: null,
  realName: null,
  phone: null
});

const rules = reactive<FormRules>({
  email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
  realName: [{ required: true, message: "请输入领队姓名", trigger: "blur" }],
  sex: [{ required: true, message: "请选择性别", trigger: "change" }],
  idType: [{ required: true, message: "请选择证件", trigger: "change", }],
  idCard: [{ required: true, message: "请输入证件号码", trigger: "blur" }],
  phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
  header: [{ required: true, message: "请上传头像", trigger: "blur" }],
});

//取缓存里的用户id
const userCache = getCache('CacheToken', { isSessionStorage: true }, {});
let id = route.query.id;
if(!id){
  id = userCache.id;
}

/**
 * 查询用户信息
 * @param formEl
 */
const userInfo = async () => {
  if(!id){
    return;
  }
  baseService
      .get("/front/spuser/"+id, {
      })
      .then((res) => {
            if (res.code === 0) {
              let userInfo = res.data;
              ruleForm.id = userInfo.id;
              ruleForm.email = userInfo.email;
              ruleForm.company = userInfo.company;
              ruleForm.phone = userInfo.phone;
              ruleForm.realName = userInfo.realName;
              ruleForm.sex = userInfo.sex+'';
              ruleForm.header = userInfo.header;
              ruleForm.idType = userInfo.idType;
              ruleForm.roleId = userInfo.roleId;
              ruleForm.idCard = baseService.hideIdCard(userInfo.idCard);
              ruleForm.address = userInfo.address;
              teamUserId();
            } else {
              ElMessage.error(res.msg);
            }
          }
      );
};


/**
 * 查询用户信息
 * @param formEl
 */
const queryUserById = async () => {
  if(!id){
    return;
  }
  baseService
      .get("/front/spuser/queryUserById?id="+id, {
      })
      .then((res) => {
            if (res.code === 0) {
              let data = res.data;
              teamForm.teamId = data.teamId;
              teamForm.teamName = data.teamName;
              teamForm.account = data.account;
              teamForm.realName = data.realName;
              teamForm.phone = data.phone;
              unbindStatus.value = data.status=='1'? true: false;
            } else {
              ElMessage.error(res.msg);
            }
          }
      );
};
const checkCompany = (company: string) => {

  baseService
      .get("/front/spuser/checkCompany?company="+company, {
      })
      .then((res) => {
            if (res.code === 0) {
              ElMessage.success(res.data);
            } else {
              ElMessage.error(res.msg);
            }
          }
      );
}


// 在data/reactive部分添加
const unbindStatus = ref(false);
const unbindDays = ref(0);

// 添加方法
const applyUnbind = () => {
  ElMessageBox.confirm('确认申请解绑当前代表队？', "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    baseService
        .post("/front/spteamuser/applyUnbind", {userId: ruleForm.id, teamId: userCache.teamId})
        .then((res) => {
          if (res.code === 0) {
            ElMessage.success("解绑申请已提交");
            unbindStatus.value = true;
            // 假设接口返回解绑天数，如果没有则默认7天
            unbindDays.value = res.data?.unbindDays || 7;

          } else {
            ElMessage.error(res.msg);
          }
        });
  }).catch(() => {});
};


/**
 * 查询用户信息
 * @param formEl
 */
const teamUserId = async () => {
  if(userCache.teamId) {
    baseService
        .post("/front/spteamuser/teamUserId", {userId: ruleForm.id, teamId: userCache.teamId})
        .then((res) => {
              if (res.code === 0) {
                let data = res.data;
                unbindStatus.value = data.status == '1' ? true : false;
                unbindDays.value = res.data?.diff || 0;
              } else {
                ElMessage.error(res.msg);
              }
            }
        );
  }
};


userInfo();
queryUserById();



</script>
<style lang="scss" scoped>
@import "../account/account";

.title-h {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: $font-weight-bold;
  padding: 24px 24px 0px;


  span {
    width: 4px;
    height: 12px;
    background: #00a0e9;
    margin-right: 7px;
  }
}

.account-module .register,
.account-module {
  width: 100%;
  height: auto;
  display: block;
  background: none;

  .c .term-ruleForm {

    padding: 0px;
    margin-top: 10px;
    margin-left: 30px;

    .btn-code {
      width: 98px;
      line-height: 32px;
      background: #EFF6FF;
      border-radius: 4px;
      text-align: center;
      color: $color-primary;
      margin-left: 12px;

    }

    .btns {
      width: 100%;
      margin-left: 275px;
      margin-top: 12px;
      display: block;
    }
  }

  .c .uplods {
    top: 231px;
    display: flex;
    left: 480px;
    right: inherit;
    margin-right: 52px;

    .avatar-uploader {

      margin-right: 52px;
    }
  }
}
</style>
<style lang="scss">
.term-ruleForm {
  .el-input {
    width: 220px;
  }

  .el-form-item--default .el-form-item__label {
    font-weight: $font-weight-bold;
    color: #333;
  }
  .el-radio__inner{
    border-color:#a8abb2;
  }
  .el-button{
    width: 108px;
    height: 38px;
  }

}
</style>

